import React,{useState,useContext} from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
//创建一个语言的上下文对象
const LanguageContext = React.createContext();
function GroundSon(){
	const {language} = useContext(LanguageContext);
	return language==='english'?'hello':'你好';
}
function Child(){
	return <GroundSon/>
}
function Language(){
	const {language,setLanguage} = useContext(LanguageContext);
	return (
		<select value={language} onChange={(event)=>setLanguage(event.target.value)}>
			<option value="english">English</option>
			<option value="chinese">中文</option>
		</select>
	)
}
function App(){
	//定义一个语言的状态，返回两个元素的数组，第一个元素是当前选中的语言，第二个元素是改变语言的方法
	const [language,setLanguage]= useState('english');
	return (
		<LanguageContext.Provider value={{language,setLanguage}}>
			<Child/>
			<Language/>
		</LanguageContext.Provider>
	)
}
root.render(<App />);